<template>
  <div class="w-1200-container">
    <Bread :nowTitle="detailInfo.title" />

    <div
      class="relative text-xl p-10 shadow-lg"
      style="width: calc(100% - 4px); margin: 0 auto; margin-bottom: 4rem"
    >
      <div
        class="tag-vertical progress-color"
        v-if="detailInfo.declareState == 1"
      >
        进行中
      </div>
      <div
        class="tag-vertical embark-color"
        v-else-if="detailInfo.declareState == 2"
      >
        未开始
      </div>
      <div
        class="tag-vertical end-color"
        v-else-if="detailInfo.declareState == 3"
      >
        已结束
      </div>

      <h2 class="font-bold text-center pb-8 text-2xl">
        {{ detailInfo.title ? detailInfo.title : "" }}
      </h2>

      <div class="text-center text-sm text-t999">
        申报起止时间：{{
          timeFormatConversion(detailInfo.startTime) +
          "-" +
          timeFormatConversion(detailInfo.endTime)
        }}
      </div>

      <div class="py-4 pt-10">
        <div v-html="detailInfo.policyContent"></div>
      </div>

      <div
        class="py-4"
        v-if="detailInfo.fileList && detailInfo.fileList.length > 0"
      >
        <div class="text-base font-bold py-4">附件</div>
        <a
          class="
            block
            text-base text-blue-500
            hover:text-blue-400
            cursor-pointe
            alink
          "
          v-for="item in detailInfo.fileList"
          :key="item.pathName"
          :href="addUrlhead(item.pathName)"
          target="_blank"
        >
          {{ item.fileName }}
        </a>
      </div>
    </div>

    <div
      class="pt-2 pb-12 flex justify-center align-middle"
      v-if="detailInfo.declareState == 1"
    >
      <el-button
        type="primary"
        class="text-lg leading-3 w-44 h-10 rounded-lg"
        @click="jumpTo(detailInfo)"
        >我要申报
      </el-button>
    </div>
  </div>
</template>

<script>
import Bread from "@/components/Bread";
import { getInfo } from "@/api/policyDeclare/";
import { addDeclare, queryDeclareType } from "@/api/declareList";

export default {
  name: "policyDeclareDetail",
  components: {
    Bread,
  },
  created() {
    this.initId();
  },
  mounted() {
    this.getDetailInfo(this.detailId);
  },
  computed: {
    // 时间格式由xxxx-xx-xx 转换为 xxxx/xx/xx
    timeFormatConversion() {
      return (time) => {
        return time ? time.replace(/-/g, "/") : "0000/00/00";
      };
    },
    // 添加url头
    addUrlhead() {
      return (url) => {
        return process.env.VUE_APP_BASE_API + "/file/" + url;
      };
    },
  },
  data() {
    return {
      baseUrl: process.VUE_APP_BASE_API,
      detailId: -1,

      detailInfo: {
        title: "",
        startTime: "",
        endTime: "",
        policyContent: "",
        declareState: 0,
        fileList: [],
      },
    };
  },
  methods: {
    // 获取路由id
    initId() {
      let nowId = this.$route.params.id;
      this.detailId = nowId;
    },

    // 获取详细信息
    getDetailInfo(id) {
      getInfo(id).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.data;
          // 计算当前时间是否已经超过开始结束时间，用于判断当前的状态
          this.detailInfo.declareState = this.calculateTime();
        }
      });
    },

    // 计算当前时间是否已经超过开始结束时间，用于判断当前的状态
    calculateTime() {
      // 如果当前状态为1-下架，则不进行计算
      if (this.detailInfo.status == 1) {
        return;
      }

      let nowTime = new Date().getTime();
      let startTime = new Date(this.detailInfo.startTime).getTime();
      let endTime = new Date(this.detailInfo.endTime).getTime();
      if (nowTime >= startTime && nowTime <= endTime) {
        return 1;
      } else if (nowTime < startTime) {
        return 2;
      } else {
        return 3;
      }
    },

    // 跳转
    jumpTo(item) {
      let obj = {
        year: item.year,
        type: item.type,
        status: item.status,
        relationPolicyId: item.policyId,
        declareTime:
          this.timeFormatConversion(item.startTime) +
          "-" +
          this.timeFormatConversion(item.endTime),
      };

      queryDeclareType(item.type)
        .then((res) => {
          if (res.code === 200) {
            addDeclare(obj).then((res) => {
              if (res.code == 200) {
                // 开始跳转
                this.$router.push({
                  path: "/user/enterprise/form",
                  query: {
                    id: res.data.keyId,
                    typeId: item.type,
                    declareIndex: 0,
                    policyId: item.policyId,
                  },
                });
              } else {
                // this.$message.error(res.msg);
                this.$router.push({
                  path: "/user/declare",
                });
              }
            });
          } else {
            // this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          // this.$message.error(err);
          this.$router.push({
            path: "/user/declare",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.tag-vertical {
  width: 2.25rem /* 36/16 */;
  writing-mode: vertical-lr;

  @apply absolute top-0 right-4 pt-4 flex align-middle items-center justify-center text-base text-white font-bold;

  &::after {
    content: "";
    @apply absolute top-full border-solid;
    width: 2.25rem;
    left: 0;
    border-width: 1rem;
  }
}

.tag-vertical.progress-color {
  @apply bg-green-400;

  &::after {
    @apply border-green-400;
    border-bottom-color: white;
  }
}

.tag-vertical.embark-color {
  @apply bg-yellow-400;

  &::after {
    @apply border-yellow-400;
    border-bottom-color: white;
  }
}

.tag-vertical.end-color {
  @apply bg-gray-400;

  &::after {
    @apply border-gray-400;
    border-bottom-color: white;
  }
}
</style>
